<div class="tags-nav">
  <div class="close-con">
    <Dropdown transfer @on-click="handleTagsOption" style="margin-top:7px;">
      <Button size="small" type="text">
        <Icon :size="16" type="ios-power"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem name="close-all">关闭所有</DropdownItem>
        <DropdownItem name="close-others">关闭其他</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
  <div class="btn-con left-btn">
    <Button
      icon="ios-arrow-back"
      type="text"
      @click="handleScroll(240)"
    ></Button>
  </div>
  <div class="btn-con right-btn">
    <Button
      icon="ios-arrow-forward"
      type="text"
      @click="handleScroll(-240)"
    ></Button>
  </div>
  <div
    class="scroll-outer"
    ref="scrollOuter"
    @DOMMouseScroll="handlescroll"
    @mousewheel="handlescroll"
  >
    <div
      ref="scrollBody"
      class="scroll-body"
      :style="{left: tagBodyLeft + 'px'}"
    >
      <transition-group name="taglist-moving-animation">
        <Tag
          type="dot"
          v-for="item in list"
          ref="tagsPageOpened"
          :key="`tag-nav-${item.name}`"
          :name="item.name"
          @on-close="handleClose"
          @click.native="handleClick(item)"
          :closable="!item.meta.homepage"
          :color="item.name === value.name ? 'blue' : 'default'"
          >{{ showTitleInside(item) }}</Tag
        >
      </transition-group>
    </div>
  </div>
</div>
